<template>
    <div>
    <ul>
        <li v-for="item in list" :key="item.id" @click="$router.push('/xiangqing/'+item.id)">
            <div><img :src="item.image" alt=""></div>
            <p>{{ item.title }}</p>
            <p>{{ item.price }}</p>
        </li>
    </ul>
    </div>
</template>

<script setup>
import api from '@/api/api'
 import { onMounted,ref } from 'vue'

 const list=ref([])
 onMounted(() => {
  api.get('/list',{
    params:{pagination:1, pageNum:30}
  }).then(res=>{
    if(res.data.code==200){
        list.value=res.data.data
    }
  })
})
</script>

<style lang="scss" scoped>
.ul{
    column-count: 2;
    .li{
        break-inside: avoid;
    }
}
</style>